<template>
  <div class="contact-page">
    <!-- 页面标题 -->
    <section class="page-header">
      <div class="container">
        <h1 data-aos="fade-up">联系我们</h1>
        <p data-aos="fade-up" data-aos-delay="100">随时为您提供帮助和支持</p>
      </div>
    </section>

    <!-- 联系信息 -->
    <section class="contact-info">
      <div class="container">
        <div class="info-grid">
          <div class="info-item" data-aos="fade-up">
            <i class="el-icon-location"></i>
            <h3>公司地址</h3>
            <p>天河区天河客运站地铁B出口的长福路198号</p>
          </div>
          <div class="info-item" data-aos="fade-up" data-aos-delay="100">
            <i class="el-icon-phone"></i>
            <h3>联系电话</h3>
            <p>18565345899</p>
          </div>
          <div class="info-item" data-aos="fade-up" data-aos-delay="200">
            <i class="el-icon-message"></i>
            <h3>电子邮箱</h3>
            <p>mengxpgogogo@gmail.com</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <section class="contact-form">
      <div class="container">
        <div class="form-container">
          <h2 data-aos="fade-up">发送消息</h2>
          <form @submit.prevent="submitForm" data-aos="fade-up" data-aos-delay="100">
            <div class="form-group">
              <input 
                type="text" 
                v-model="form.name" 
                placeholder="您的姓名" 
                required
              >
            </div>
            <div class="form-group">
              <input 
                type="email" 
                v-model="form.email" 
                placeholder="电子邮箱" 
                required
              >
            </div>
            <div class="form-group">
              <input 
                type="tel" 
                v-model="form.phone" 
                placeholder="联系电话"
              >
            </div>
            <div class="form-group">
              <input 
                type="text" 
                v-model="form.subject" 
                placeholder="主题" 
                required
              >
            </div>
            <div class="form-group">
              <textarea 
                v-model="form.message" 
                placeholder="您的留言" 
                required
              ></textarea>
            </div>
            <button type="submit" class="submit-btn">发送消息</button>
          </form>
        </div>
      </div>
    </section>

    <!-- 地图 -->
    <section class="map-section">
      <div class="container">
        <div class="map-container" data-aos="fade-up">
          <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3411.1234567890123!2d121.12345678901234!3d31.12345678901234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzHCsDA3JzI0LjQiTiAxMjHCsDA3JzI0LjQiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890123!5m2!1szh-CN!2scn" 
            width="100%" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy"
          ></iframe>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { Location, Phone, Message } from '@element-plus/icons-vue'

const form = ref({
  name: '',
  email: '',
  phone: '',
  subject: '',
  message: ''
})

const submitForm = async () => {
  try {
    await axios.post('http://localhost:8080/api/contact', form.value)
    alert('消息发送成功！')
    form.value = {
      name: '',
      email: '',
      phone: '',
      subject: '',
      message: ''
    }
  } catch (error) {
    alert('消息发送失败，请稍后重试。')
    console.error(error)
  }
}
</script>

<style scoped>
.page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('@/assets/contact-header.jpg');
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  text-align: center;
  color: #fff;
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.contact-info {
  padding: 80px 0;
  background: #f8f9fa;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.info-item {
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-item i {
  font-size: 2.5rem;
  color: #3498db;
  margin-bottom: 20px;
}

.info-item h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.contact-form {
  padding: 80px 0;
  background: #fff;
}

.form-container {
  max-width: 800px;
  margin: 0 auto;
}

.form-container h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.form-group textarea {
  height: 150px;
  resize: vertical;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-btn:hover {
  background: #2980b9;
}

.map-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.map-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
}
</style> 